<template>
  <div>
    <div class="entity-info-input-group input-group">
      <span class="input-group-text">实体名称</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入实体名称"
        v-model="refModelValue.entityName"
      />
    </div>

    <div class="entity-info-input-group input-group">
      <span class="input-group-text">实体类型</span>
      <input
        type="text"
        class="form-control"
        placeholder="输入实体类型"
        v-model="refModelValue.type"
      />
    </div>

    <div class="input-group d-flex mb-3">
      <span class="input-group-text">实体属性</span>
      <span class="span-property-list">
          <div 
          class="div-single-property d-flex justify-content-end align-items-center" 
          v-for="item, index in refModelValue.properties" 
          :key="index">
            <span class="span-single-property-left d-flex align-items-center">
              <span class="input-group-text">{{index+1}}</span>
              <input
              type="text"
              class="in-entity-property-name form-control"
              placeholder="输入属性名" v-model="item.name"/>

              <span class="mx-1">:</span>

              <input
              type="text"
              class="in-entity-property-text form-control"
              placeholder="输入属性" v-model="item.text"/>
            </span>

            <i class="i-remove-property fa-solid fa-circle-minus" @click="removeProperty(index)"></i>
          </div>

          <div class="div-add-single-property" @click="addProperty">
            <i class="fa-solid fa-circle-plus"></i>
          </div>
      </span>
    </div>
  </div>
</template>

<script>
import { ref,watch } from "vue";

export default {
  props: {
    modelValue: {
      type: Object,
      required: true,
    }
  },
  setup(props, { emit }) {
    const refModelValue = ref(props.modelValue);

    // since we assign directly to v-model variable outside (in graph-db-management.vue), 
    // a watch is still necessary.
    watch(()=>props.modelValue,newValue=>{refModelValue.value=newValue;});

    // use deep to watch property changes inside refModelValue
    watch(refModelValue,()=>{emit("update:modelValue",refModelValue.value);},{deep:true});

    const addProperty=()=>{
        refModelValue.value.properties.push({
            name:"",
            text:""
        });
    };

    const removeProperty=(index)=>{
      refModelValue.value.properties.splice(index,1);
    }

    return {
      refModelValue,
      addProperty,
      removeProperty
    };
  },
};
</script>

<style lang="scss" scoped>
$entity-info-input-group-height:40px;

.entity-info-input-group{
    height: $entity-info-input-group-height;
}

.span-property-list{
    background-color: white;
    flex-grow: 1;
}

.div-single-property{
    border: 1px solid #ced4da;
}

.span-single-property-left{
  display: inline-block;
  height: $entity-info-input-group-height;
  
  flex-grow: 1;
  
  span:first-child{
        display: inline-block;
        height: 100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .form-control:nth-child(2){
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.div-add-single-property{
    @extend .div-single-property;

    color: grey;

    height: $entity-info-input-group-height;
    // make add text vertically centered
    line-height: $entity-info-input-group-height;
    cursor:pointer;
    text-align: center;

    transition-duration: 150ms;
    
    &:hover{
        background-color:#E9F2FF;
    }
}

.in-entity-property{
    // override bootstrap style
    display:inline-block;
    height: 100%;
}

.in-entity-property-name{
    @extend .in-entity-property;
    width: 30%;
}

.in-entity-property-text{
    @extend .in-entity-property;
    flex-grow: 1;
}

.i-remove-property{
    cursor: pointer;
    color: grey;
    margin: 0 10px;
}
</style>